<!--
 * @Author: 宋杰
 * @Date: 2021-01-08 17:32:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-15 22:00:04
 * @Description: 一家十一口(猜一字) right2 职业
-->
<template>
  <div class="divBox">
    <!-- 标签 -->
    <div class="titleBox">
      <div>平台累计放款总量(万元)</div>
    </div>
    <div class="divBox2">
      <div id="right2" style="width:100%; height: 100%;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart: null,
      data: [250, 182, 260, 200],
    };
  },
  created() {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById("right2"));
      this.chart.setOption({
        title: {
          show: false,
          //   // text: "历史累计放款量",
          //   text: "累计放款额（万元）",
          //   x: "left",
          //   y: "top",
          //   textAlign: "left",
          //   textStyle: {
          //     color: "#31A5DE",
          //     fontSize: 16,
          //   },
        },
        color: ["#32C5FF"],
        tooltip: {},
        // legend: {
        //   orient: "vertical", // 'vertical'
        //   x: "right",
        //   y: "top",
        //   itemWidth: 14,
        //   itemHeight: 7,
        //   icon: "pin",
        //   data: ["城镇用户", "非城镇用户"],
        // },
        grid: {
          left: "15%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            splitLine: {
              color: "rgba(255, 255, 2555, 0.5)",
            },
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "right",
          },
          // axisLabel: {
          //   color: "rgba(255, 255, 255, 0.5)",
          //   interval: 0,
          //   formatter: function(value) {
          //     return value.split("").join("\n");
          //   },
          // },
          axisTick: {
            show: false,
          },
          name: "日期",
          nameLocation: "start",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            splitLine: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "left",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          name: "累计放款额（万元）",
          nameLocation: "end",
        }, // 直角坐标系 Y 轴
        series: [
          {
            // name: "保险",
            type: "bar",
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: [10, 10, 0, 0],
            },
            emphasis: {
              itemStyle: {},
            },
            barWidth: "40%", //柱图宽度
            data: this.data,
          },
          {
            // name: "第一季度",
            type: "line",
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: [10, 10, 0, 0],
            },
            areaStyle: {
              // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1CC7E5", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(28, 199, 229, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              itemStyle: {},
            },
            // barWidth: "50%", //柱图宽度
            data: this.data,
          },
        ],
      });
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.divBox {
  width: 100%;
  height: 100%;
  // border: 1px solid #75bdff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
// 标签
.titleBox {
  font-family: PingFangSC-Regular;
  font-size: 0.3rem;
  color: #75bdff;
  letter-spacing: 0.015rem;
  text-align: left;
  line-height: 0.5rem;
  height: 0.5rem;
  width: 100%;
  background: url("../../assets/heng2.png") no-repeat;
  background-size: 100% 40%;
  background-position: right 0 bottom 0;
}
.divBox2 {
  flex: 1;
  width: 100%;
}
</style>
